<template>
    <div class="flex-center xp-component" @click="open" title="日历">
        <div class="xp-date-box flex-column-center" style="flex:1">
            <div class="xp-date">{{date}}</div>
            <div class="xp-date-content flex-column-center">
                <p class="xp-day">{{day}}</p>
                <div class="xp-week">{{week}}</div>
            </div>
        </div>
        <div class="xp-calender" style="flex:2">
            <el-calendar v-model="nowDate">
            </el-calendar>
        </div>
    </div>
</template>

<script lang="ts">
import { formatWeek, formatWeeks } from '@/utils/util';
import { reactive, toRefs, defineComponent, computed, onMounted } from 'vue';
export default defineComponent({
    name: 'xpCalender',
    components: {
    },
    props: {
    },
    emits: ['open'],
    setup (props, context) 
    {
        let data = reactive({
            options:{
                type:'slot',
                id:'1002',
                name:'日历',
                component:'xpCalendars',
                xIcon:require('@/assets/calendar.png'),
                background:'#ff5a5d'
            },
            day:'',
            date:'',
            week:'',
            nowDate:new Date()
        });
        let methods = {
            open ()
            {
                context.emit('open', data.options);
            },
            getDate ()
            {
                let date = data.nowDate;
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                let day = date.getDay();

                data.day = dd.toString();
                data.date = yy + '年' + mm + '月';
                data.week = formatWeeks(day);
            }
        };

        onMounted(() => 
        {
            methods.getDate();
        });
        return {
            ...toRefs(data),
            ...methods
        };
    }
});
</script>
<style lang='scss' scoped>
.xp-component {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 10px;
}

.xp-date-box {
    overflow: hidden;
    margin: 5px 10px 5px 15px; 
    border-radius: 20px;
    background-image: linear-gradient(35deg,#354564 30%,#4c5f7f,#8b9bb8);
    box-shadow: 9px 0px 21px #354564, 0px 0px 21px #8b9bb8;
}

.xp-date {
    width: 100%;
    background-color: #ff5a5d;
    padding: 10px;
    font-size: .8em;
}

.xp-date-content {
    padding: 0 5px 10px;

    .xp-day {
        font-size: 3em;
        font-weight: bold;
    }

    .xp-week {
        color: #808080;
        font-size: .8em;
    }
}

.xp-calender {
    max-height: 180px;
}

:deep(.el-calendar) {
    background-color: transparent;
}

:deep(thead) {
    font-size: .8em;
}

:deep(.el-calendar-table thead th) {
    color: #808080;
}


:deep(.el-calendar__body) {
    padding: 12px 20px 12px;
    margin-top: -10px;
}

:deep(.el-calendar__header) {
    display: none;
}

:deep(.el-calendar-table .el-calendar-day) {
    padding: 2px;
    height: 24px;
    font-size: .7em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-calendar-table tr td:first-child) {
    border: none;
}

:deep(.el-calendar-table tr:first-child td) {
    border: none;
}

:deep(.el-calendar-table td) {
    border: none;
    pointer-events: none;
}

:deep(.el-calendar-table:not(.is-range) td.prev) {
    pointer-events: none;
}

:deep(.el-calendar-table:not(.is-range) td.next) {
    pointer-events: none;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
    background-color: transparent;
}


:deep(.el-calendar-table td.is-selected) {
    border-radius: 50%;
    background-color: transparent;
}

:deep(.el-calendar-table td.is-today) {
    color: #fff;
    font-weight: bold;
}

:deep(.el-calendar-table td.is-today span) {
    background: #ff5a5d;
    padding: 3px;
    width: 24px;
    border-radius: 50%;
}
</style>
